<template>
  <div class="select">
    <van-field
      :readonly="true"
      :required="required"
      :clickable="!disabled"
      :label="label"
      :name="name"
      :input-align="iptAlign"
      :placeholder="placeholder"
      @click="showPop"
      :rules="rules"
      v-model="comValue"

    />
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        :default-index="selectIndex"
        ref="picker"
        show-toolbar
        value-key="name"
        :columns="pickerOptions"
        @cancel="showPicker = false"
        @confirm="confirm"
      >
      </van-picker>
    </van-popup>
  </div>
</template>

<script>
// 选择器组件-数据来源字典
// import { get_dict_options } from "@/api/user.js";
import { mapGetters } from "vuex";
import { Picker } from 'vant';
export default {
  name: "commonSelect",
  components:{
    'van-picker':Picker
  },
  props: {
    // 字典code
    code: {
      require: true,
      default: "JGLX",
    },
    rules: {
      type: Array,
      default() {
        return [{ required: false }];
      },
    },
    disabled:{
      type:Boolean,
      default:false
    },
    // 绑定标识
    name: {
      type: String,
      require: false,
    },
    // 标题
    label: {
      require: true,
    },
    // 是否必填
    required: {
      require: false,
      default: false,
    },
    // 回显值
    value: {
      require: false,
    },
    // 输入框位置
    iptAlign: {
      require: false,
      default: "left",
    },
    // 占位文字
    placeholder: {
      require: false,
      default: "请选择",
    },
    // 是否只读
    readonly: {
      require: false,
      default: false,
    },
  },
  computed: {
    ...mapGetters(["dictList"]),
    pickerOptions() {
      let target = this.dictList.find((item) => item.code == this.code);
      let arr = [];
      if (target && target.children.length > 0) {
        target.children.forEach((item) => {
          arr.push({ code: item.code, name: item.name });
        });
      }
      return arr;
    },
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        if (val || val === 0 || val==='0') {
          let index = this.pickerOptions.findIndex((item) => item.code == val);
          this.comValue = this.pickerOptions[index].name;
          this.selectIndex = index;
        } else {
          this.comValue = "";
          this.selectIndex = 0;
        }
      },
    },
  },
  data() {
    return {
      showPicker: false,
      comValue: "",
      selectIndex: 0,
    };
  },
  methods: {
    showPop(){
      if(this.disabled){
        return 
      }
      this.showPicker = true
    },
    confirm(val) {
      this.$nextTick(() => {
        this.comValue = val.name;
        this.$emit("update:value", val.code);
        this.$emit("change", val.code);
        this.showPicker = false;
      });
    },
  },
};
</script>
<style lang="less" scoped>
.select {
  position: relative;
}
.select::after {
  position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0.42667rem;
    bottom: 0;
    left: 0.42667rem;
    border-bottom: 0.02667rem solid #ebedf0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}
</style>
